<template>
    <div class="container">
      <Tabs type="card" v-model="tab_index" @on-click="changeTab()">
        <TabPane label="体温记录" name="1">
            <Row class="btn-action">
              <Col span="24">
                <Button type="primary" class="mp10" @click="chuanSongAction">添加温度</Button>
              </Col>
            </Row>
            <!--        <div ref="dom" class="charts chart-bar" style="height:300px"></div>-->
            <fever-echart ref="echart"></fever-echart>
            <div class="opt-area-02">
              <div class="left-con">
                录入总数: <span>{{countData.fcnum}} 条</span>
                <!--                提交记录: <span>{{countData.ytbnum}} 条</span> |-->
                <!--                暂存:<span>{{countData.zcnum}} 条</span>-->
              </div>
              <div class="right-con">
                <!--                <div class="input-frame">-->
                <!--                    <Select v-model="params.state" style="width:200px" @on-change="selectlist">-->
                <!--                        <Option value="">全部</Option>-->
                <!--                        <Option value="0">暂存</Option>-->
                <!--                        <Option value="1">已提交</Option>-->
                <!--                    </Select>-->
                <!--                </div>-->
                <div class="input-frame" style="width: 340px">
                  <!--                  <DatePicker type="datetime" @on-click="selectlist(1)" placeholder="选择时间" v-model="params.measure_time"></DatePicker>-->
                  <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择时间" v-model="timeArr" style="width: 300px"></DatePicker>
                </div>
                <div class="input-frame">
                  <Button class="table-action-btn" type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
                </div>
                <!--                <div class="input-frame">-->
                <!--                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" v-model="params.id_card"-->
                <!--                           icon="ios-search"/>-->
                <!--                </div>-->
              </div>
            </div>
            <Table :loading="countData.loading" border :columns="columns2" :data="fcDataList" size="small">
              <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="info" size="small" @click="showdetail(row, 'info')">详情</Button>
                <Button class="table-action-btn" type="success" size="small"
                        @click="showdetail(row, 'edit')">编辑
                </Button>
                <!--                <Button class="table-action-btn" type="success" size="small"-->
                <!--                        @click="uploadImgAll(row, 'uploadImg')">批量上传-->
                <!--                </Button>-->
                <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
              </template>
            </Table>
            <Row type="flex" justify="end" class="page_style">
              <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                    show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
            </Row>
            <Modal v-model="modal1" title="添加温度" @on-ok="ok" @on-cancel="cancel">
              <Form :model="formItem" :label-width="80">
                <FormItem label="选择时间">
                  <Row>
                    <Col span="11">
                      <DatePicker type="datetime" placeholder="选择时间" v-model="formItem.measure_time" style="width: 300px" ></DatePicker>
                    </Col>
                  </Row>
                </FormItem>
                <FormItem label="填报温度">
                  <Input v-model="formItem.temperature" placeholder="温度" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="备注">
                  <Input v-model="formItem.remark" placeholder="备注" style="width: 300px"></Input>
                </FormItem>
              </Form>
            </Modal>
        </TabPane>
<!--        <TabPane label="消毒记录" name="2">-->
<!--          <Row class="btn-action">-->
<!--            <Col span="24">-->
<!--              <Button type="primary" class="mp10" @click="chuanSongAction">添加消毒记录</Button>-->
<!--            </Col>-->
<!--          </Row>-->
<!--          <fever-echart ref="echart"></fever-echart>-->
<!--          <div class="opt-area-02">-->
<!--            <div class="left-con">-->
<!--              录入总数: <span>{{countData.fcnum}} 条</span>-->
<!--              &lt;!&ndash;                提交记录: <span>{{countData.ytbnum}} 条</span> |&ndash;&gt;-->
<!--              &lt;!&ndash;                暂存:<span>{{countData.zcnum}} 条</span>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="right-con">-->
<!--              &lt;!&ndash;                <div class="input-frame">&ndash;&gt;-->
<!--              &lt;!&ndash;                    <Select v-model="params.state" style="width:200px" @on-change="selectlist">&ndash;&gt;-->
<!--              &lt;!&ndash;                        <Option value="">全部</Option>&ndash;&gt;-->
<!--              &lt;!&ndash;                        <Option value="0">暂存</Option>&ndash;&gt;-->
<!--              &lt;!&ndash;                        <Option value="1">已提交</Option>&ndash;&gt;-->
<!--              &lt;!&ndash;                    </Select>&ndash;&gt;-->
<!--              &lt;!&ndash;                </div>&ndash;&gt;-->
<!--              <div class="input-frame" style="width: 340px">-->
<!--                &lt;!&ndash;                  <DatePicker type="datetime" @on-click="selectlist(1)" placeholder="选择时间" v-model="params.measure_time"></DatePicker>&ndash;&gt;-->
<!--                <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择时间" v-model="timeArr" style="width: 300px"></DatePicker>-->
<!--              </div>-->
<!--              <div class="input-frame">-->
<!--                <Button class="table-action-btn" type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>-->
<!--              </div>-->
<!--              &lt;!&ndash;                <div class="input-frame">&ndash;&gt;-->
<!--              &lt;!&ndash;                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" v-model="params.id_card"&ndash;&gt;-->
<!--              &lt;!&ndash;                           icon="ios-search"/>&ndash;&gt;-->
<!--              &lt;!&ndash;                </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--          <Table :loading="countData.loading" border :columns="columns3" :data="fcDataList" size="small">-->
<!--            <template slot="action" slot-scope="{ row }">-->
<!--              <Button class="table-action-btn" type="info" size="small" @click="showdetail(row, 'info')">详情</Button>-->
<!--              <Button class="table-action-btn" type="success" size="small"-->
<!--                      @click="showdetail(row, 'edit')">编辑-->
<!--              </Button>-->
<!--              &lt;!&ndash;                <Button class="table-action-btn" type="success" size="small"&ndash;&gt;-->
<!--              &lt;!&ndash;                        @click="uploadImgAll(row, 'uploadImg')">批量上传&ndash;&gt;-->
<!--              &lt;!&ndash;                </Button>&ndash;&gt;-->
<!--              <Button type="error" size="small" @click="deleteRow(row)">删除</Button>-->
<!--            </template>-->
<!--          </Table>-->
<!--          <Row type="flex" justify="end" class="page_style">-->
<!--            <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"-->
<!--                  show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>-->
<!--          </Row>-->
<!--          <Modal v-model="modal2" title="添加消毒记录" @on-ok="ok" @on-cancel="cancel">-->
<!--            <Form :model="formItem" :label-width="80">-->
<!--              <FormItem label="选择时间">-->
<!--                <Row>-->
<!--                  <Col span="11">-->
<!--                    <DatePicker type="datetime" placeholder="选择时间" v-model="formItem.measure_time" style="width: 300px" ></DatePicker>-->
<!--                  </Col>-->
<!--                </Row>-->
<!--              </FormItem>-->
<!--              <FormItem label="备注">-->
<!--                <Input v-model="formItem.remark" placeholder="备注" style="width: 300px"></Input>-->
<!--              </FormItem>-->
<!--            </Form>-->
<!--          </Modal>-->
<!--        </TabPane>-->
      </Tabs>
    </div>
</template>

<script>
// import echarts from 'echarts'
// import tdTheme from './theme.json'
// import { on, off } from '@/libs/tools'
import { temperaturelistforapp, createtemperatureforapp, date0str, deltemperatureforapp, updatetemperatureforapp } from '@/api/yi-qing-fang-kong'
import FeverEchart from './compoments/fever-echart'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'fever-mobile-list',
  components: { FeverEchart },
  data () {
    return {
      tab_index: '1',
      timeArr: [],
      id: '',
      formItem: {
        user_id: this.$route.query.id,
        measure_time: '',
        temperature: 0,
        remark: ''
      },
      flag: 'add',
      modal1: false,
      modal2: false,
      temperature: '', // 人体温度
      row: {},
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      params: { name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '', user_id: this.$route.query.id },
      columns2: [
        { title: '日期', key: 'measure_time', align: 'center' },
        { title: '体温', key: 'temperature', align: 'center' },
        { title: '备注', key: 'remark', align: 'center' },
        { title: '操作', align: 'center', width: 250, slot: 'action' }
      ],
      columns3: [
        { title: '日期', key: 'measure_time', align: 'center' },
        { title: '备注', key: 'remark', align: 'center' },
        { title: '操作', align: 'center', width: 250, slot: 'action' }
      ],
      fcDataList: [],
      dom: null
    }
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.params.type = this.tab_index
      this.getList(this.tab_index)
    },
    selectlist (type) {
      console.log(this.timeArr)
      this.params.starttime = date0str(this.timeArr[0])
      this.params.endtime = date0str(this.timeArr[1])
      this.params.pageNo = 1
      this.params.type = type
      console.log(this.params, 'rucan')
      // this.params.measure_time = date0str(this.params.measure_time)
      this.getList(type)
    },
    getList (type) {
      this.params.type = type
      temperaturelistforapp(this.params).then(res => {
        let result = res.data
        console.log(result)
        if (result.errcode === 0) {
          this.fcDataList = result.data.results
          this.countData.fcnum = result.data.totalRecord
          this.params = {
            pageNo: result.data.pageNo,
            pageSize: result.data.pageSize,
            totalPage: result.data.totalPage,
            totalRecord: result.data.totalRecord,
            user_id: this.$route.query.id,
            type: type
          }
          let xData = []
          let sData = []
          if (result.data.results) {
            result.data.results.forEach(item => {
              xData.push(item.date)
              sData.push(item.t)
            })
            // this.echatInit(xData, sData)
          } else {
            this.$Notice.error({
              title: '查询体温列表信息失败',
              desc: res.data.errmsg
            })
          }
        }
      })
    },
    deleteRow (row) {
      this.$Modal.confirm({
        title: '确认删除此信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        onOk: () => {
          deltemperatureforapp({ id: row.id, 'type': this.tab_index }).then(res => {
            if (res.data.errcode === 0) {
              this.getList(this.tab_index)
              this.$refs.echart.chart()
            } else {
              this.$Notice.error({
                title: '删除信息失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    showdetail (row, what) {
      if (this.tab_index === '1') {
        this.modal1 = true
        this.formItem.measure_time = row.measure_time
        this.formItem.remark = row.remark
        this.formItem.temperature = row.temperature
        this.flag = what
        this.id = row.id
      } else if (this.tab_index === '2') {
        this.modal2 = true
        this.formItem.measure_time = row.measure_time
        this.formItem.remark = row.remark
        this.flag = what
        this.id = row.id
      }
      // this.formItem.user_id =
      // this.$router.push({ path: '/record/add', query: { id: row.id, what: what } })
    },
    uploadImgAll (row, what) {
      this.row = row
      this.$refs.imgService.modelAction()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo, this.params.type)
    },
    chuanSongAction () {
      this.formItem = {}
      if (this.tab_index === '1') {
        this.modal1 = true
      } else if (this.tab_index === '2') {
        this.modal2 = true
      }
      this.flag = 'add'
    },
    changeTab () {
      console.log(this.tab_index)
      this.selectlist(this.tab_index)
    },
    ok () {
      this.formItem.measure_time = date0str(this.formItem.measure_time)
      if (this.flag === 'add') {
        let param1 = {
          user_id: this.$route.query.id,
          measure_time: this.formItem.measure_time,
          temperature: this.formItem.temperature,
          remark: this.formItem.remark,
          type: this.tab_index
        }
        createtemperatureforapp(param1).then(res => {
          let result = res.data
          console.log(result)
          if (result.errcode === 0) {
            this.$Notice.success({
              title: '添加信息成功',
              desc: '添加信息成功'
            })
            this.getList(this.tab_index)
            this.$refs.echart.chart()
          } else {
            this.$Notice.error({
              title: '添加信息失败',
              desc: res.data.errmsg
            })
          }
        })
      } else if (this.flag === 'edit') {
        let param = {
          user_id: this.$route.query.id,
          id: this.id,
          measure_time: this.formItem.measure_time,
          temperature: this.formItem.temperature,
          remark: this.formItem.remark,
          type: this.tab_index
        }
        updatetemperatureforapp(param).then(res => {
          let result = res.data
          console.log(result)
          if (result.errcode === 0) {
            this.$Notice.success({
              title: '修改信息成功',
              desc: '修改信息成功'
            })
            this.getList(this.tab_index)
            this.$refs.echart.chart()
          } else {
            this.$Notice.error({
              title: '更改信息失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    },
    cancel () {
      this.modal1 = false
    }
  },
  mounted () {
    this.selectlist('1')
    // this.echatInit()
  },
  beforeDestroy () {
    // off(window, 'resize', this.resize)
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
</style>
